<template>
	<view>
		<view class="header-title">增加备注</view>
		<textarea v-model="beizhu.remark" placeholder="输入文字可用作备注或分段说明"></textarea>
		<view class="img-box">
			<image v-if="showImg" class="img" v-for="(item, index) in beizhu.img" :src="item.url" :key="index" mode=""></image>
			<image v-if="showAdd" src="../../../static/images/add.png" @tap="choicePic"></image>
		</view>
		<button v-if="edit" class="buttoncss" @tap="handleEdit">修改</button>
		<button v-else class="buttoncss" @tap="save">确定</button>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import app from '../../../App.vue';
	export default {
		data() {
			return {
				imgList: [],
				remark: '',
				wenid: '',
				beizhu: {
					remark: '',
					img: []
				},
				edit: false
			}
		},
		computed: {
			showImg() {
				return this.beizhu.img.length > 0 ? true : false
			},
			showAdd() {
				return this.beizhu.img.length < 3 ? true : false
			}
		},
		methods: {
			choicePic() {
				if (this.beizhu.img.length < 3) {
					this.showAdd = true
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							uni.getFileSystemManager().readFile({
								filePath: res.tempFilePaths[0], //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: res => { //成功的回调
									this.beizhu.img.push({
										url: 'data:image/jpeg;base64,' + res.data
									})
								}
							})
						}
					})
				} else {
					this.showAdd = false
					uni.showToast({
						title: '最多上传三张图片',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 修改
			handleEdit() {
				let that = this
				api.look({
					api: 'updatec',
					table: 6,
					id: this.id,
					beizhu: this.beizhu
				}).then(res => {
					if(res.code == 200) {
						if (app.globalData.flag == 1) {
							uni.navigateTo({
								url: '../../editDiaocha/editDiaocha?wenid=' + that.wenid
							})
						} else if (app.globalData.flag == 2) {
							uni.navigateTo({
								url: '../../createForm/editForm/editForm?wenid=' + that.wenid
							})
						} else {
							uni.navigateTo({
								url: '../../createVote/editVote/editVote?wenid=' + that.wenid
							})
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 保存
			save() {
				let that = this
				if (this.beizhu.remark != '' || this.beizhu.img.length > 0) {
					api.look({
						api: 'wentibei',
						wenid: this.wenid,
						pid: 4,
						beizhu: this.beizhu
					}).then(res => {
						if (res.code === 200) {
							console.log(app.globalData.flag, 'FLAG')
							if (app.globalData.flag == 1) {
								uni.navigateTo({
									url: '../../editDiaocha/editDiaocha?wenid=' + that.wenid
								})
							} else if (app.globalData.flag == 2) {
								uni.navigateTo({
									url: '../../createForm/editForm/editForm?wenid=' + that.wenid
								})
							} else {
								uni.navigateTo({
									url: '../../createVote/editVote/editVote?wenid=' + that.wenid
								})
							}
						}
					}).catch(err => {
						console.log(err)
					})
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			let _this = this
			options.wenid ? this.wenid = options.wenid : this.wenid = ''
			options.id ? this.id = options.id : this.id = ''
			if (this.wenid != '' && this.id != '') {
				api.look({
					api: 'tables',
					wenid: _this.wenid
				}).then(res => {
					if (res.code == 200) {
						res.date.forEach((item, index) => {
							if (item.id == _this.id) {
								_this.beizhu = JSON.parse(item.beizhu)
								this.edit = true
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.header-title {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #333;
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx auto;
	}

	textarea {
		width: 690rpx;
		height: 300rpx;
		border: 1rpx solid #DFDFDF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 20rpx 0 0 20rpx;
		box-sizing: border-box;
	}

	.buttoncss {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		margin: 200rpx auto 0;
		text-align: center;
		color: #fff;
		background: #1F9FFB;
	}

	.img-box {
		width: 100%;
		padding: 0 30rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		image {
			width: 30%;
			height: 200rpx;
			box-sizing: border-box;
			border: 1rpx solid #C0C0C0;
			border-radius: 10rpx;
		}
	}

	/* 	.add-icon {
		width: 100%;
		height: 200rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		image {
			width: 30%;
			height: 100%;
		}
	} */
</style>
